<template>
	<tab-page :current="2" has-bottom>
		<c-skeleton-list :data="data" :loading="loading" extraClass="pt-2-2">
			<view class="rounded-xl flex flex-row items-stretch mb-3-1" v-for="el in data" :key="el.id">
				<view
					class="flex-center px-1-3"
					hover-class="opacity-50"
					hover-start-time="0"
					hover-stay-time="0"
					@click="selectItem(el)"
				>
					<text class="iconfont text-xxl color-main" :class="[el.selected ? 'icon-gouxuan' : 'icon-weixuanze']"></text>
				</view>
				<view class="rounded-xl border b-active overflow-hidden mr-2" @click="toDetail(el)">
					<c-img :src="el.thumbnail" :width="200" :height="200" />
				</view>
				<view class="flex-1 flex flex-column">
					<view class="row-center mb-2">
						<view class="flex-1 break-all" @click="toDetail(el)">
							<text class="color-main font-semibold text-m">{{ el.name }}</text>
						</view>
						<view
							class="px-1-3"
							hover-class="opacity-50"
							hover-start-time="0"
							hover-stay-time="0"
							@click="handleDel(el)"
						>
							<text class="iconfont icon-lajitong color-main text-xl"></text>
						</view>
					</view>
					<view @click="toDetail(el)">
						<text class="color-disable text-m block">{{ el.specifications }}</text>
					</view>
					<view class="flex-1" />
					<view class="row-center pr-1-3">
						<view class="flex-1">
							<text class="color-main font-semibold text-m mr-1-3">¥</text>
							<text class="color-main text-xl">{{ el.price }}</text>
						</view>
						<view
							class="border rounded-l b-active p-0-4"
							:hover-class="el.quantity <= 1 ? '' : 'opacity-50'"
							hover-start-time="0"
							hover-stay-time="0"
							:class="[el.quantity <= 1 ? 'opacity-30' : '']"
							@click="oper(el, -1)"
						>
							<text class="iconfont icon-jian text-m color-main"></text>
						</view>
						<view class="mx-1-3">
							<text class="color-main text-m">{{ el.quantity }}</text>
						</view>
						<view
							class="border rounded-l b-active p-0-4"
							:hover-class="el.quantity >= el.maxQuantity ? '' : 'opacity-50'"
							hover-start-time="0"
							hover-stay-time="0"
							:class="[el.quantity >= el.maxQuantity ? 'opacity-30' : '']"
							@click="oper(el, 1)"
						>
							<text class="iconfont icon-tianjia text-m color-main"></text>
						</view>
					</view>
				</view>
			</view>
		</c-skeleton-list>
		<c-message-dialog ref="mesRef" />
		<template #bottom>
			<view class="border-t b-active p-1-3 row-center color-main bg-color-1">
				<view class="pr-1-3" @click="handleCheckAll">
					<text class="iconfont text-xxl" :class="[checkAll ? 'icon-gouxuan' : 'icon-weixuanze']"></text>
				</view>
				<text class="text-m" @click="handleCheckAll">全选({{ data.length }})</text>
				<view class="flex-1" />
				<text class="text-m mr-2-2">合计</text>
				<text class="text-m mr-1">¥</text>
				<text class="text-l font-semibold mr-2-2">{{ sumPrice }}</text>
				<view
					class="border b-active px-3-1 py-1-3 rounded-l"
					:class="[sumPrice > 0 ? '' : 'opacity-50']"
					:hover-class="sumPrice > 0 ? 'bg-primary-op10' : ''"
					hover-start-time="0"
					hover-stay-time="50"
					@click="toOrder"
				>
					<text class="text-m">结算</text>
				</view>
			</view>
		</template>
	</tab-page>
</template>

<script>
import { ref, onMounted } from 'vue';
import { getShoppingCarList, updateShoppingCar, delShoppingCar } from '@/base/api/goods.js';
import authCache from '@/uni-sdk/utils/authCache.js';
import { intlNumberFormat } from '@/uni-sdk/utils/common.js';
import { toSubmitOrder } from "@/base/common-business.js";

export default {
	onLoad() {
		this.first = true;
	},
	onShow() {
		if (getApp().globalData.curPageNeedUpdate() || this.first) {
			this.first = false;
			this.reload();
		}
	},
	setup() {
		const data = ref([]);
		const first = ref(true);
		const loading = ref(true);
		const checkAll = ref(false);
		const mesRef = ref();
		async function reload(showLoading = false) {
			const community = authCache.getCommunity();
			if (!community) return;
			if (!showLoading) {
				loading.value = true;
			}
			const newData = await getShoppingCarList({ communityId: community.id }, showLoading);
			loading.value = false;
			if (newData) {
				newData.forEach((el) => {
					el.maxQuantity = 999;
				});
				data.value = newData;
				handleSum();
			}
		}
		let operInter = null;
		function oper(item, d) {
			if ((d < 0 && item.quantity <= 1) || (d > 0 && item.quantity >= item.maxQuantity)) {
				return;
			}
			clearTimeout(operInter);
			item.quantity += d;
			operInter = setTimeout(async () => {
				await updateShoppingCar({
					id: item.id,
					communityId: item.communityId,
					productId: item.productId,
					quantity: item.quantity,
				});
			}, 1500);
			handleSum();
		}
		function selectItem(el) {
			el.selected = !el.selected;
			handleSum();
		}

		const sumPrice = ref(0);
		function handleCheckAll() {
			data.value.forEach((item) => {
				item.selected = !checkAll.value;
			});
			handleSum();
		}
		function handleSum() {
			let val = 0;
			let allSelected = true;
			data.value.forEach((item) => {
				if (item.selected) {
					val += item.price * item.quantity;
				} else {
					allSelected = false;
				}
			});
			checkAll.value = allSelected;
			sumPrice.value = intlNumberFormat(val);
		}
		/**
		 * 移除
		 */
		function handleDel(el) {
			let options = {
				title: '提示',
				content: '确认移除该商品吗？',
				ok: async () => {
					const re = await delShoppingCar(el.id);
					if (re) {
						reload(true);
					}
				},
			};
			mesRef.value.setOptions(options);
		}

		function toOrder() {
			if (sumPrice.value > 0) {
				const selectedData = data.value.filter((el) => el.selected);
				if(selectedData.length > 0) {
					toSubmitOrder({
						orderData: selectedData,
						shoppingCartIds: selectedData.map((el) => el.id),
					});
				}
			}
		}
		function toDetail(el) {
			uni.navigateTo({
				url: '/pages/product-detail/product-detail?id=' + el.productId,
			});
		}
		return {
			data,
			loading,
			first,
			reload,
			oper,
			sumPrice,
			selectItem,
			checkAll,
			handleCheckAll,
			handleDel,
			mesRef,
			toOrder,
			toDetail,
		};
	},
};
</script>
<style></style>
